<template>
  <div class="app-container home">
    <div class="horizontal-scroll-container">
      <div class="marquee-content">
        {{ text }}
      </div>
    </div>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="项目整体分析" name="t1">
        <el-row :gutter="20">
          <div class="head-title"></div>
          <div class="stat-date">
            <text>仅查看外部公司：</text>
            <el-switch
                v-model="outFlag"
                inline-prompt
                width="60"
                active-text="是"
                inactive-text="否"
                @change="initOut"
            />
            <text style="margin-left: 30px">时间：</text>
            <el-date-picker
                v-model="queryStat.times"
                type="daterange"
                range-separator="To"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                @change="initStatistic"
            />
          </div>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="box-card">
              <div ref="chartProjectDom" class="line-box"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card">
              <div ref="chartAmountDom" class="line-box"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px">
          <el-col :span="12">
            <el-card class="box-card">
              <div class="small-date">
                <text class="box-title">新增项目及产值情况</text>
                <el-date-picker
                    style="float:right"
                    v-model="queryCzBarStat.year"
                    type="year"
                    placeholder="选择年份"
                    value-format="YYYY"
                    size="small"
                    @change="initStatCzBar"
                />
              </div>
              <div ref="chartCzDom" class="line-box"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card">
              <div class="small-date">
                <text class="box-title">业绩增长情况</text>
                <el-date-picker
                    style="float:right"
                    v-model="queryYjBarStat.year"
                    type="year"
                    placeholder="选择年份"
                    value-format="YYYY"
                    size="small"
                    @change="initStatYjBar"
                />
              </div>
              <div ref="chartYjDom" class="line-box"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px;margin-bottom: 20px">
          <el-col :span="12">
            <el-row>
              <el-col>
                <el-card class="box-card">
                  <div class="small-date">
                    <text class="box-title">部门指标展示</text>
                    <el-date-picker
                        style="float:right"
                        v-model="queryDeptBarStat.year"
                        type="year"
                        placeholder="选择年份"
                        value-format="YYYY"
                        size="small"
                        @change="initStatDeptBar"
                    />
                  </div>
                  <div ref="chartDom3" class="line-box-200"></div>
                </el-card>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px">
              <el-col>
                <el-card class="box-card">
                  <div class="small-date">
                    <text class="box-title">各板块项目数统计</text>
                    <el-date-picker
                        style="float:right"
                        v-model="querySectorBarStat"
                        type="year"
                        placeholder="选择年份"
                        value-format="YYYY"
                        size="small"
                        @change="initStatSectorBar"
                    />
                  </div>
                  <div ref="chartSectorDom" class="line-box-200"></div>
                </el-card>
              </el-col>
            </el-row>

          </el-col>
          <el-col :span="12">
            <el-card class="box-card">
              <div class="topic-box">
                <div class="box-title">我的任务</div>
                <div v-if="dataTopic.topicDueNum>0" style="color: red">{{ dataTopic.topicDueNum }}个任务已超期，请尽快完成
                </div>
                <div style="font-size: 12px;cursor: pointer;" @click="jumpTopic">查看更多>></div>
              </div>
              <el-table :data="dataTopic.topicList" border
                        style="width: 100%;height:468px"
                        :row-class-name="tableRowClassName">
                <el-table-column type="index" label="序号" align="left" width="60"/>
                <el-table-column prop="topicName" label="任务名称" align="left" show-overflow-tooltip/>
                <el-table-column prop="statusName" label="状态" align="left" width="80"/>
                <el-table-column prop="endTime" label="截止完成时间" align="left" width="180"/>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="审计项目板块统计" name="t2">
        <el-row :gutter="20" style="margin-top: 20px;margin-bottom: 20px">
          <el-col :span="12">
            <el-card class="box-card">
              <div class="small-date">
                <el-date-picker
                    style="float:right"
                    v-model="queryAuditNumBarStat"
                    type="year"
                    placeholder="选择年份"
                    value-format="YYYY"
                    size="small"
                    @change="initStatAuditNum"
                />
              </div>
              <div ref="chartAuditNumDom" class="line-box"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card">
              <div class="small-date">
                <el-date-picker
                    style="float:right"
                    v-model="queryAuditAmountBarStat"
                    type="year"
                    placeholder="选择年份"
                    value-format="YYYY"
                    size="small"
                    @change="initStatAuditAmount"
                />
              </div>
              <div ref="chartAuditAmountDom" class="line-box"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="风险分析" name="t3">
        <el-row :gutter="20" style="margin-top: 20px;margin-bottom: 20px">
          <el-col :span="16">
            <el-card class="box-card">
              <div class="small-date">
                <text class="box-title">开票情况</text>
                <el-date-picker
                    style="float:right"
                    v-model="queryRiskBarStat"
                    type="year"
                    placeholder="选择年份"
                    value-format="YYYY"
                    size="small"
                    @change="initStatRisk"
                />
              </div>
              <div ref="chartRiskDom" class="line-box-600"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="23">
                <el-card class="box-card">
                  <div class="small-date">
                    <text class="box-title">成本分析</text>
                    <el-date-picker
                        style="float:right"
                        v-model="queryCostBarStat"
                        type="year"
                        placeholder="选择年份"
                        value-format="YYYY"
                        size="small"
                        @change="initStatCost"
                    />
                  </div>
                  <div ref="chartCostDom" class="line-box-200"></div>
                </el-card>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px">
              <el-col :span="23">
                <el-card class="box-card">
                  <div class="small-date">
                    <text class="box-title">风险关键区域</text>
                  </div>
                  <div ref="chartWordDom" class="line-box-200"></div>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>

    <el-dialog :close-on-click-modal="false" draggable title="业绩增长情况" v-model="openCompare" width="800px"
               append-to-body
               @opened="initChart"
               style="margin-top: 200px!important;">
        <div ref="chartHuanDom" class="line-box"></div>
        <template #footer>
          <div slot="footer" class="dialog-footer">
            <el-button @click="setCancel">关 闭</el-button>
          </div>
        </template>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" draggable title="开票情况" v-model="openInvoice" width="900px"
               append-to-body
               @opened="initStatInvoice"
               style="height:100%;margin-top:0!important;">
        <div ref="chartInvoiceDom" class="line-box-auto"></div>
        <template #footer>
          <div slot="footer" class="dialog-footer">
            <el-button @click="setCancel">关 闭</el-button>
          </div>
        </template>
    </el-dialog>
  </div>
</template>

<script setup name="Index">
import {
  statTopic,
  statCzBar,
  statDeptBar,
  statProject,
  statAmount,
  statYjBar,
  statSectorBar,
  statAuditAmountBar,
  statAuditNumBar,
  statCostBar,
  statRiskBar, statRiskWord
} from "@/api/biz/statApi";
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import {currentDate} from "@/utils/dateutil.js";

const router = useRouter();
const {proxy} = getCurrentInstance();

const text = ref('IICG-PCS系统中各项绩效系数等均为统一公式自动换算，与集团管理体系不一致的地方均以管理体系细项规则和风控财务部核算为准！')
const activeNames = ref(["t1", "t2", "t3"]);
const openCompare = ref(false);
const openInvoice = ref(false);
const outFlag = ref(false);
const huanData = ref([]);
const huanName = ref("");
// 创建一个响应式引用来保存DOM元素
const chartProjectDom = ref(null);
const chartAmountDom = ref(null);
const chartCzDom = ref(null);
const chartYjDom = ref(null);
const chartHuanDom = ref(null);
const chartSectorDom = ref(null);
const chartAuditNumDom = ref(null);
const chartAuditAmountDom = ref(null);
const chartRiskDom = ref(null);
const chartCostDom = ref(null);
const chartWordDom = ref(null);
const chartInvoiceDom = ref(null);
const chartDom3 = ref(null);
let chartProjectInstance = null;
let chartAmountInstance = null;
let chartCzInstance = null;
let chartYjInstance = null;
let chartHuanInstance = null;
let chartSectorInstance = null;
let chartAuditNumInstance = null;
let chartAuditAmountInstance = null;
let chartRiskInstance = null;
let chartCostInstance = null;
let chartWordInstance = null;
let chartInvoiceInstance = null;
let chartInstance3 = null;
onMounted(async () => {
  await nextTick(); // 确保DOM已经渲染完成
  chartInstance3 = echarts.init(chartDom3.value);
  chartProjectInstance = echarts.init(chartProjectDom.value);
  chartAmountInstance = echarts.init(chartAmountDom.value);
  chartCzInstance = echarts.init(chartCzDom.value);
  chartYjInstance = echarts.init(chartYjDom.value);
  chartSectorInstance = echarts.init(chartSectorDom.value);
  chartAuditNumInstance = echarts.init(chartAuditNumDom.value);
  chartAuditAmountInstance = echarts.init(chartAuditAmountDom.value);
  chartRiskInstance = echarts.init(chartRiskDom.value);
  chartCostInstance = echarts.init(chartCostDom.value);
  chartWordInstance = echarts.init(chartWordDom.value);
  chartInvoiceInstance = echarts.init(chartInvoiceDom.value);
});
// 销毁ECharts实例
onUnmounted(() => {
  if (chartRiskInstance != null && chartRiskInstance.dispose) {
    chartRiskInstance.dispose();
  }
  if (chartCostInstance != null && chartCostInstance.dispose) {
    chartCostInstance.dispose();
  }
  if (chartInstance3 != null && chartInstance3.dispose) {
    chartInstance3.dispose();
  }
  if (chartProjectInstance != null && chartProjectInstance.dispose) {
    chartProjectInstance.dispose();
  }
  if (chartAmountInstance != null && chartAmountInstance.dispose) {
    chartAmountInstance.dispose();
  }
  if (chartCzInstance != null && chartCzInstance.dispose) {
    chartCzInstance.dispose();
  }
  if (chartYjInstance != null && chartYjInstance.dispose) {
    chartYjInstance.dispose();
  }
  if (chartSectorInstance != null && chartSectorInstance.dispose) {
    chartSectorInstance.dispose();
  }
  if (chartAuditNumInstance != null && chartAuditNumInstance.dispose) {
    chartAuditNumInstance.dispose();
  }
  if (chartAuditAmountInstance != null && chartAuditAmountInstance.dispose) {
    chartAuditAmountInstance.dispose();
  }
  if (chartWordInstance != null && chartWordInstance.dispose) {
    chartWordInstance.dispose();
  }
  if (chartInvoiceInstance != null && chartInvoiceInstance.dispose) {
    chartInvoiceInstance.dispose();
  }
});

const dataTopic = ref({
  topicList: [],
  topicDueNum: 0
});
const queryLine = ref(null)
const queryStat = ref({
  times: null,
  outFlag:false
})
const queryMonthBarStat = ref(null)
const queryCzBarStat = ref({
  year: null,
  outFlag:false
})
const queryYjBarStat = ref({
  year: null,
  outFlag:false
})
const queryDeptBarStat = ref({
  year: null,
  outFlag:false
})
const querySectorBarStat = ref(null)
const queryAuditNumBarStat = ref(null)
const queryAuditAmountBarStat = ref(null)
const queryRiskBarStat = ref(null)
const queryCostBarStat = ref(null)
const resYj = ref([]);

function initStatTopic() {
  statTopic().then(response => {
    dataTopic.value = response.data;
  });
}

function initStatDeptBar() {
  statDeptBar(queryDeptBarStat.value).then(response => {
    const option3 = {
      tooltip: {
        trigger: 'axis',
        confine:true,
        axisPointer: {
          type: 'cross'
        }
      },
      legend: [{
        data: ['合同金额', '渠道费', '渠道税费', '回款额','待收款'],
        icon: "roundRect",
        x:'center',
        y:'0%'
      },{
        data: ['创建的项目数', '履约项目总数', '在途履约项目数', '完成项目数','疑难项目数'],
        icon: "roundRect",
        x:'center',
        y:'7%'
      }],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '1%',
        top: '25%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        data: response.data.deptList,
        axisLabel: {
          interval: 0, // 关键配置：强制显示所有标签
          rotate: 20,  // 可选：当标签过长时设置旋转角度
          formatter: function(value) {
            // 可选：超长文本处理（示例：超过4字符换行）
            return value.length > 5 ? value.substring(0,5)+'...' : value;
          }
        }
      },
      yAxis: [
        {
          type: 'value',
          name: '金额',
          position: 'left',
          alignTicks: true,
          axisLabel: {
            formatter: '{value} 万元'
          }
        },
        {
          type: 'value',
          name: '项',
          position: 'right',
          alignTicks: true
        }
      ],
      series: [
        {
          data: response.data.monthProjectNum,
          type: 'bar',
          yAxisIndex: 1,
          name: '创建的项目数'
        },
        {
          data: response.data.monthAmount,
          type: 'line',
          yAxisIndex: 0,
          name: '合同金额'
        },
        {
          data: response.data.monthChannelAmount,
          type: 'line',
          yAxisIndex: 0,
          name: '渠道费'
        },
        {
          data: response.data.monthChannelTaxAmount,
          type: 'line',
          yAxisIndex: 0,
          name: '渠道税费'
        },
        {
          data: response.data.monthReceiptAmount,
          type: 'bar',
          yAxisIndex: 1,
          name: '回款额'
        },
        {
          data: response.data.monthUnReceiptAmount,
          type: 'bar',
          yAxisIndex: 1,
          name: '待收款'
        },
        {
          data: response.data.enforceTotalProjectNum,
          type: 'bar',
          yAxisIndex: 1,
          name: '履约项目总数'
        },
        {
          data: response.data.enforceRunProjectNum,
          type: 'bar',
          yAxisIndex: 1,
          name: '在途履约项目数'
        },
        {
          data: response.data.enforceDoneProjectNum,
          type: 'bar',
          yAxisIndex: 1,
          name: '完成项目数'
        },
        {
          data: response.data.enforceDiffProjectNum,
          type: 'bar',
          yAxisIndex: 1,
          name: '疑难项目数'
        }
      ]
    };
    chartInstance3.setOption(option3);
  });
}

function initStatProject() {
  statProject(queryStat.value).then(response => {
    const option = {
      title: {
        text: '项目情况'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ['待归集底稿', '待签约项目', '司法项目', '预警项目', '超期项目', '完成项目', '在途项目', '重大项目', '疑难项目', '累计项目']
      },
      series: [
        {
          name: '项目情况一览（单位：项）',
          type: 'bar',
          label: {
            show: true,
            position: 'right'
          },
          itemStyle: {
            // 核心配置：通过回调函数实现不同颜色
            color: function (params) {
              const colors = [
                '#5470c6', '#91cc75', '#fac858', '#00BFFF', '#73c0de',
                '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#2ec7c9'
              ];
              return colors[params.dataIndex % colors.length]; // 自动循环颜色
            }
          },
          data: response.data
        }
      ]
    };
    chartProjectInstance.setOption(option);
    chartProjectInstance.on('click', function (params) {
      router.push("biz/bizProject");
    });
  });
}

function initStatAmount() {
  statAmount(queryStat.value).then(response => {
    const option = {
      title: {
        text: '财税情况'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ['税后总利润', '绩效支出', '成本支出', '待回款额', '已回款额', '待开票额', '已开票额', '渠道费与渠道税费', '实际合同额', '合同总额']
      },
      series: [
        {
          name: '财税情况（单位：万元）',
          type: 'bar',
          label: {
            show: true,
            position: 'right'
          },
          itemStyle: {
            // 核心配置：通过回调函数实现不同颜色
            color: function (params) {
              const colors = [
                '#5470c6', '#91cc75', '#fac858', '#00BFFF', '#73c0de',
                '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#2ec7c9'
              ];
              return colors[params.dataIndex % colors.length]; // 自动循环颜色
            }
          },
          data: response.data
        }
      ]
    };
    chartAmountInstance.setOption(option);
    chartAmountInstance.on('click', function (params) {
      router.push("biz/bizCost");
    });
  });
}

function initStatCzBar() {
  statCzBar(queryCzBarStat.value).then(response => {
    const option = {
      tooltip: {
        trigger: 'axis',
        confine:true,
        axisPointer: {
          type: 'cross'
        }
      },
      legend: {
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {},
          myExport: {
            show: true,
            title: '导出数据',
            icon: 'path://M12 2 L8 8 L16 8 L12 2z M6 12 L6 18 L18 18 L18 12',
            onclick: function() {
              proxy.download('/biz/stat/exportRisk', { year: queryCzBarStat.value }, `开票情况-${currentDate()}.xlsx`, 'post');
            }
          }
        }
      },
      xAxis: {
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      yAxis: [
        {
          type: 'value',
          name: '金额',
          position: 'left',
          alignTicks: true,
          axisLabel: {
            formatter: '{value} 万元'
          }
        },
        {
          type: 'value',
          name: '项',
          position: 'right',
          alignTicks: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#91CC75'
            }
          },
        }
      ],
      series: [
        {
          data: response.data.monthProjectNum,
          type: 'bar',
          yAxisIndex: 1,
          itemStyle: {
            color: '#91CC75'
          },
          name: '项目数量'
        },
        {
          data: response.data.monthAmount,
          type: 'line',
          yAxisIndex: 0,
          name: '合同总额'
        },
        {
          data: response.data.monthRealAmount,
          type: 'line',
          yAxisIndex: 0,
          name: '实得额'
        },
        {
          data: response.data.monthReceiptAmount,
          type: 'line',
          yAxisIndex: 0,
          name: '已回款'
        },
        {
          data: response.data.monthUnReceiptAmount,
          type: 'line',
          yAxisIndex: 0,
          name: '待回款'
        }
      ]
    };
    chartCzInstance.setOption(option);
  });
}
function setCancel(){
  openCompare.value = false;
  openInvoice.value = false;
}
function initChart(){
  if (chartHuanInstance != null && chartHuanInstance.dispose) {
    chartHuanInstance.dispose();
  }
  chartHuanInstance = echarts.init(chartHuanDom.value);
  const option2 = {
    tooltip: {
      trigger: 'axis',
      confine:true,
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    title: {
      text: huanName.value
    },
    xAxis: {
      data: [queryMonthBarStat.value-1, queryMonthBarStat.value]
    },
    yAxis: {},
    series: [
      {
        data: huanData.value,
        type: 'bar'
      }
    ]
  };
  chartHuanInstance.setOption(option2);
}
function initStatYjBar() {
  statYjBar(queryYjBarStat.value).then(response => {
    resYj.value = response.data;
    const option = {
      tooltip: {
        trigger: 'axis',
        confine:true,
        axisPointer: {
          type: 'cross'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      yAxis: {
        type: 'value',
        name: '金额',
        position: 'left',
        alignTicks: true,
        axisLabel: {
          formatter: '{value} 万元'
        }
      },
      series: [
        {
          data: resYj.value[0].monthAmount,
          type: 'line',
          name: '合同额'
        },
        {
          data: resYj.value[0].monthReceiptAmount,
          type: 'line',
          name: '回款额'
        },
        {
          data: resYj.value[0].monthUnReceiptAmount,
          type: 'line',
          name: '待收款'
        },
        {
          data: resYj.value[0].monthChannelAmount,
          type: 'line',
          name: '渠道费'
        },
        {
          data: resYj.value[0].monthChannelTaxAmount,
          type: 'line',
          name: '渠道税费'
        },
        {
          data: resYj.value[0].monthCostAmount,
          type: 'line',
          name: '成本支出'
        },
        {
          data: resYj.value[0].monthSfAmount,
          type: 'line',
          name: '税负额'
        },
        {
          data: resYj.value[0].monthPerformanceAmount,
          type: 'line',
          name: '预估绩效支出'
        }
      ]
    };
    chartYjInstance.setOption(option);
    chartYjInstance.on('click', function (params) {
      // params 包含了有关点击事件的信息
      console.log(params); // 在控制台查看点击事件的详细信息
      openCompare.value = true;
      let t = [];
      if(params.seriesIndex===0){
         t.push(resYj.value[1].monthAmount[params.dataIndex]);
      }else if(params.seriesIndex===1){
        t.push(resYj.value[1].monthReceiptAmount[params.dataIndex]);
      }else if(params.seriesIndex===2){
        t.push(resYj.value[1].monthUnReceiptAmount[params.dataIndex]);
      }else if(params.seriesIndex===3){
        t.push(resYj.value[1].monthChannelAmount[params.dataIndex]);
      }else if(params.seriesIndex===4){
        t.push(resYj.value[1].monthChannelTaxAmount[params.dataIndex]);
      }else if(params.seriesIndex===5){
        t.push(resYj.value[1].monthCostAmount[params.dataIndex]);
      }else if(params.seriesIndex===6){
        t.push(resYj.value[1].monthSfAmount[params.dataIndex]);
      }else if(params.seriesIndex===7){
        t.push(resYj.value[1].monthPerformanceAmount[params.dataIndex]);
      }
      t.push(params.value);
      huanData.value = t;
      huanName.value = params.seriesName+"同比";
    });
  });
}

function initStatSectorBar() {
  statSectorBar(querySectorBarStat.value).then(response => {
    resYj.value = response.data;
    const option = {
      tooltip: {
        trigger: 'axis',
        confine:true,
        axisPointer: {
          type: 'cross'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        data: response.data.nameList,
        axisLabel: {
          interval: 0, // 关键配置：强制显示所有标签
          rotate: 20,  // 可选：当标签过长时设置旋转角度
          formatter: function(value) {
            // 可选：超长文本处理（示例：超过5字符换行）
            return value.length > 5 ? value.substring(0,5)+'...' : value;
          }
        }
      },
      yAxis: {},
      series: [
        {
          data: response.data.projectNum,
          type: 'bar',
          name: '项目数'
        },
        {
          data: response.data.doingNum,
          type: 'bar',
          name: '正在履约项目数'
        },
        {
          data: response.data.doneNum,
          type: 'bar',
          name: '已完成项目数'
        },
        {
          data: response.data.difficultNum,
          type: 'bar',
          name: '疑难项目数'
        }
      ]
    };
    chartSectorInstance.setOption(option);
  });
}

function initStatAuditNum() {
  statAuditNumBar(queryAuditNumBarStat.value).then(response => {
    const option = {
      tooltip: {
        trigger: 'axis',
        confine:true,
        axisPointer: {
          type: 'shadow'
        },
        formatter: (params) => {
          const data = params[0].data; // 获取当前柱子的数据对象
          return `
        <div style="padding: 8px;">
          <div><b>${params[0].name}</b></div>
          <div style="margin: 5px 0;">总计: <b>${data.value}</b></div>
          <div>${data.detail}</div>
        </div>
      `;
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ['预警项目数', '超期项目数', '已完成项目数', '在途项目数', '疑难项目数', '累计项目数']
      },
      series: [
        {
          name: '审计项目情况（单位：项）',
          type: 'bar',
          label: {
            show: true,
            position: 'right'
          },
          itemStyle: {
            // 核心配置：通过回调函数实现不同颜色
            color: function (params) {
              const colors = [
                '#5470c6', '#91cc75', '#fac858', '#00BFFF', '#73c0de',
                '#3ba272'
              ];
              return colors[params.dataIndex % colors.length]; // 自动循环颜色
            }
          },
          data: response.data
        }
      ]
    };
    chartAuditNumInstance.setOption(option);
  });
}

function initStatAuditAmount() {
  statAuditAmountBar(queryAuditAmountBarStat.value).then(response => {
    const option = {
      tooltip: {
        trigger: 'axis',
        confine:true,
        axisPointer: {
          type: 'shadow'
        },
        formatter: (params) => {
          const data = params[0].data; // 获取当前柱子的数据对象
          return `
        <div style="padding: 8px;">
          <div><b>${params[0].name}</b></div>
          <div style="margin: 5px 0;">总计: <b>${data.value}</b></div>
          <div>${data.detail}</div>
        </div>
      `;
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ['税后利润',  '成本支出', '待开票额', '已开票额', '回款额', '实际合同额']
      },
      series: [
        {
          name: '审计财务情况（单位：元）',
          type: 'bar',
          label: {
            show: true,
            position: 'right'
          },
          itemStyle: {
            // 核心配置：通过回调函数实现不同颜色
            color: function (params) {
              const colors = [
                '#5470c6', '#91cc75', '#fac858', '#00BFFF', '#73c0de',
                '#3ba272'
              ];
              return colors[params.dataIndex % colors.length]; // 自动循环颜色
            }
          },
          data: response.data
        }
      ]
    };
    chartAuditAmountInstance.setOption(option);
  });
}
function initRiskDom(){
  if (chartRiskInstance != null && chartRiskInstance.dispose) {
    chartRiskInstance.dispose();
  }
  chartRiskInstance = echarts.init(chartRiskDom.value);
}
function initStatRisk() {
  statRiskBar(queryRiskBarStat.value,false).then(response => {
    initRiskDom();
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {},
          myExport: {
            show: true,
            title: '导出数据',
            icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
            onclick: function() {
              proxy.download('/biz/stat/exportRisk', { year: queryRiskBarStat.value }, `开票情况-${currentDate()}.xlsx`, 'post');
            }
          },
          myAll: {
            show: true,
            title: '查看全部',
            icon: 'path://M512 32C256 32 32 256 32 512s224 480 480 480 480-224 480-480S768 32 512 32zm19 593h-38v-38h38v38zm0-170H487v-38h44v-44h-44v-38h44v-44h-38v-38h76v76h-38v44h44v76zm0-170H487v-38h44v-44h-44v-38h44v-44h-38v-38h76v76h-38v44h44v76zm0-170H487v-38h44v-44h-44v-38h44v-44h-38v-38h76v76h-38v44h44v76zm0-170H487v-38h44v-44h-44v-38h44v-44h-38v-38h76v76h-38v44h44v76z',
            onclick: function () {
              openInvoiceChart();
            }
          }
        }
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: response.data.nameList,
        axisLabel: {
          // 核心换行逻辑（每4字符换行示例）
          formatter: function(value) {
            const maxLen = 10;  // 单行最大字符数
            return value.split('').reduce((acc, char, i) => {
              return (i % maxLen === 0) ? acc + '\n' + char : acc + char;
            }, '').trim();
          }
        }
      },
      series: [
        {
          name: queryRiskBarStat.value,
          type: 'bar',
          label: {
            show: true,
            position: 'right'
          },
          data: response.data.num1List
        },
        {
          name: queryRiskBarStat.value-1,
          type: 'bar',
          label: {
            show: true,
            position: 'right'
          },
          data: response.data.num2List
        },
        {
          name: queryRiskBarStat.value-2,
          type: 'bar',
          label: {
            show: true,
            position: 'right'
          },
          data: response.data.num3List
        }
      ]
    };
    chartRiskInstance.setOption(option);
  });
}
function initStatCost() {
  statCostBar(queryCostBarStat.value).then(response => {
    const option = {
      legend: {
        top: 'bottom'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        show: true,
        feature: {
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          type: 'pie',
          radius: '50%',
          data: response.data
        }
      ]
    };
    chartCostInstance.setOption(option);
  });
}
function initStatWord() {
  statRiskWord().then(response => {
    const option = {
      series: [{
        type: 'wordCloud',
        // shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
        shape: 'circle',
        sizeRange: [12, 60],//字体尺寸范围
        rotationRange: [-30,30], //旋转角度 0, 0
        textPadding: 0,
        gridSize: 0, //词间距 7
        width: '95%' ,
        height: '90%' ,
        left: 'center',
        top: 'center',
        drawOutOfBound: false,//溢出是否显示
        // 布局的时候是否有动画
        layoutAnimation: true,
        autoSize: {
          enable: true,
          minSize: 4
        },
        textStyle: {
          fontFamily: 'sans-serif',
          fontWeight: 'bold',
          // 颜色可以用一个函数来返回字符串
          color: function () {
            // Random color
            return 'rgb(' + [
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160)
            ].join(',') + ')';
          }
        },
        emphasis: {
          focus: 'self',
          textStyle: {
            textShadowBlur: 10,
            textShadowColor: '#333'
          }
        },

        // 数据必须是一个数组，数组是对象，对象必须有name和value属性
        data: response.data
      }]
    };
    chartWordInstance.setOption(option);
  });
}
function initInvoiceChart(){
  if (chartInvoiceInstance != null && chartInvoiceInstance.dispose) {
    chartInvoiceInstance.dispose();
  }
  chartInvoiceInstance = echarts.init(chartInvoiceDom.value);

}
function openInvoiceChart(){
  openInvoice.value = true;

}
function initStatInvoice() {
  statRiskBar(queryRiskBarStat.value,true).then(response => {
    initInvoiceChart();
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: response.data.nameList,
        axisLabel: {
          // 核心换行逻辑（每4字符换行示例）
          formatter: function(value) {
            const maxLen = 10;  // 单行最大字符数
            return value.split('').reduce((acc, char, i) => {
              return (i % maxLen === 0) ? acc + '\n' + char : acc + char;
            }, '').trim();
          }
        }
      },
      series: [
        {
          name: queryRiskBarStat.value,
          type: 'bar',
          label: {
            show: true,
            position: 'right'
          },
          data: response.data.num1List
        },
        {
          name: queryRiskBarStat.value-1,
          type: 'bar',
          label: {
            show: true,
            position: 'right'
          },
          data: response.data.num2List
        },
        {
          name: queryRiskBarStat.value-2,
          type: 'bar',
          label: {
            show: true,
            position: 'right'
          },
          data: response.data.num3List
        }
      ]
    };
    chartInvoiceInstance.setOption(option);
  });
}

const tableRowClassName = ({row, rowIndex}) => {
  if (row.due) {
    return 'error-row'
  }
  if (row.warn) {
    return 'warning-row'
  }
  return ''
}

function jumpTopic() {
  router.push("/biz/bizProject");
}

function getDefaultRange() {
  const now = new Date();
  const start = new Date(now.getFullYear(), 0, 1); // 本年第一天
  const end = new Date(); // 当前时间
  var t = [formatDate(start), formatDate(end)];
  queryDeptBarStat.value.year = now.getFullYear() + '';
  queryStat.value.times = t;
  queryLine.value = now.getFullYear() + '';
  queryMonthBarStat.value = now.getFullYear() + '';
  querySectorBarStat.value = now.getFullYear() + '';
  queryAuditNumBarStat.value = now.getFullYear() + '';
  queryAuditAmountBarStat.value = now.getFullYear() + '';
  queryCzBarStat.value.year = now.getFullYear() + '';
  queryYjBarStat.value.year = now.getFullYear() + '';
  queryRiskBarStat.value = now.getFullYear() + '';
  queryCostBarStat.value = now.getFullYear() + '';
}

function formatDate(date) {
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  if (month < 10) {
    month = '0' + month;
  }
  if (day < 10) {
    day = '0' + day;
  }
  return `${year}-${month}-${day}`;
}

function initStatistic(){
  initStatProject();
  initStatAmount();
}

function initOut(){
  queryStat.value.outFlag = outFlag.value;
  queryCzBarStat.value.outFlag = outFlag.value;
  queryYjBarStat.value.outFlag = outFlag.value;
  queryDeptBarStat.value.outFlag = outFlag.value;
  initStatProject();
  initStatAmount();
  initStatCzBar();
  initStatYjBar();
  initStatDeptBar();
}

getDefaultRange();
initStatTopic();
initStatDeptBar();
initStatProject();
initStatAmount();
initStatCzBar();
initStatYjBar();
initStatSectorBar();
initStatAuditNum();
initStatAuditAmount();
initStatRisk();
initStatCost();
initStatWord();

</script>

<style scoped lang="scss">
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.line {
  font-size: 20px;
  height: 40px;
  line-height: 40px;
}

.num {
  font-size: 30px;
  font-weight: 700;
  height: 40px;
  line-height: 40px;
}

.img {
  width: 50px;
  height: 50px;
}

.line-box {
  width: 100%;
  height: 300px;
}
.line-box-600{
  width: 100%;
  height: 485px;
}
.line-box-200{
  width: 100%;
  height: 200px;
}
.line-box-auto{
  width: 100%;
  height: calc(100vh - 6vh - 80px);
}

.topic-box {
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.stat-date {
  width: 600px;
  height:50px;
  line-height: 50px;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.small-date {
  height: 24px;
  width: 100%;
  margin-bottom: 2px;
}
.box-title{
  font-weight: bold;
  font-size: 18px;
  padding-left: 8px;
}
.head-title{
  font-weight: bold;
  font-size: 25px;
  height: 50px;
  line-height: 50px;
  padding-left: 15px;
}
::v-deep .el-collapse-item__content{
  padding: 0!important;
}
::v-deep .el-collapse-item__header{
  font-size: 20px!important;
}
.horizontal-scroll-container {
  width: 100%; /* 容器宽度 */
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  border: 1px solid #ebeef5;
  padding: 8px 0;
}

.marquee-content {
  display: inline-block;
  padding-left: 100%; /* 初始位置 */
  animation: marquee 40s linear infinite;
  animation-play-state: running;
  color: red;
}

/* 悬停暂停 */
.horizontal-scroll-container:hover .marquee-content {
  animation-play-state: paused;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>
<style>
.el-table .error-row {
  --el-table-tr-bg-color: var(--el-color-error-light-9);
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
</style>
